<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: black;
      }
      .wrapper {
        position: relative;
      }
      p {
        margin: 0;
        line-height: 2;
        color: white;
      }
      .coating {
        position: absolute;
        top: 0;
      }
      @property --p{
        syntax: '<percentage>';
        initial-value: 0%;
        inherits: false;
      }
      .text {
        background: linear-gradient(
          to right,
          transparent var(--p),
          black calc(var(--p) + 80px)
        );
        /* background: linear-gradient(
          to right,
          transparent 1%,
          black calc(1% + 80px)
        ); */
        color: transparent;
        animation: erase 20s linear forwards;
      }
      @keyframes erase {
        to {
          --p: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta molestiae
        quos, non eum dolorem totam aliquid quod dolores commodi, dolore odio
        natus maxime ex cum, obcaecati iure molestias quibusdam animi?¸ Lorem
        ipsum dolor sit amet consectetur adipisicing elit. Dicta, nisi? Aliquam
        natus dolorem earum doloremque porro. Corporis accusantium sint officia
        aut aliquid sunt perferendis, dignissimos itaque quia vitae unde
        voluptatum. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        Eveniet illum delectus earum distinctio, officia provident temporibus
        esse quidem accusamus corrupti, enim veniam amet, consequatur minima
        quia repudiandae dicta iste! Error. Lorem ipsum dolor sit, amet
        consectetur adipisicing elit. Animi, esse. Dicta veniam amet esse sed
        perspiciatis, voluptatem modi deleniti ab, vero a eos magni omnis
        tenetur nostrum minima consequuntur id? Lorem ipsum dolor sit amet
        consectetur adipisicing elit. Dolorum nostrum labore maiores, illum
        beatae possimus reiciendis natus aut dolore eius ipsum commodi aliquid
        debitis voluptatem cumque enim itaque distinctio voluptatibus?
      </p>
      <p class="coating">
        <span class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta molestiae
          quos, non eum dolorem totam aliquid quod dolores commodi, dolore odio
          natus maxime ex cum, obcaecati iure molestias quibusdam animi?¸ Lorem
          ipsum dolor sit amet consectetur adipisicing elit. Dicta, nisi? Aliquam
          natus dolorem earum doloremque porro. Corporis accusantium sint officia
          aut aliquid sunt perferendis, dignissimos itaque quia vitae unde
          voluptatum. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
          Eveniet illum delectus earum distinctio, officia provident temporibus
          esse quidem accusamus corrupti, enim veniam amet, consequatur minima
          quia repudiandae dicta iste! Error. Lorem ipsum dolor sit, amet
          consectetur adipisicing elit. Animi, esse. Dicta veniam amet esse sed
          perspiciatis, voluptatem modi deleniti ab, vero a eos magni omnis
          tenetur nostrum minima consequuntur id? Lorem ipsum dolor sit amet
          consectetur adipisicing elit. Dolorum nostrum labore maiores, illum
          beatae possimus reiciendis natus aut dolore eius ipsum commodi aliquid
          debitis voluptatem cumque enim itaque distinctio voluptatibus?
        </span>
      </p>
    </div>
  </body>
</html>
